<template>
    <div id="nthChild">
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span>css属性选择</span>
                </div>
            </template>
            <div class="tag-box">
                <h3 class="tag-title">:first-child</h3>
                <div class="tag-ball">
                    <div class="ball ball_1">1</div>
                    <div class="ball ball_1">2</div>
                    <div class="ball ball_1">3</div>
                    <div class="ball ball_1">4</div>
                    <div class="ball ball_1">5</div>
                    <div class="ball ball_1">6</div>
                </div>
            </div>
            <div class="tag-box">
                <h3 class="tag-title">:last-child</h3>
                <div class="tag-ball">
                    <div class="ball ball_2">1</div>
                    <div class="ball ball_2">2</div>
                    <div class="ball ball_2">3</div>
                    <div class="ball ball_2">4</div>
                    <div class="ball ball_2">5</div>
                    <div class="ball ball_2">6</div>
                </div>
            </div>
            <div class="tag-box">
                <h3 class="tag-title">:nth-child(2)</h3>
                <div class="tag-ball">
                    <div class="ball ball_3">1</div>
                    <div class="ball ball_3">2</div>
                    <div class="ball ball_3">3</div>
                    <div class="ball ball_3">4</div>
                    <div class="ball ball_3">5</div>
                    <div class="ball ball_3">6</div>
                </div>
            </div>
            <div class="tag-box">
                <h3 class="tag-title">:nth-child(odd)</h3>
                <div class="tag-ball">
                    <div class="ball ball_4">1</div>
                    <div class="ball ball_4">2</div>
                    <div class="ball ball_4">3</div>
                    <div class="ball ball_4">4</div>
                    <div class="ball ball_4">5</div>
                    <div class="ball ball_4">6</div>
                </div>
            </div>
            <div class="tag-box">
                <h3 class="tag-title">:nth-child(even)</h3>
                <div class="tag-ball">
                    <div class="ball ball_5">1</div>
                    <div class="ball ball_5">2</div>
                    <div class="ball ball_5">3</div>
                    <div class="ball ball_5">4</div>
                    <div class="ball ball_5">5</div>
                    <div class="ball ball_5">6</div>
                </div>
            </div>
            <div class="tag-box">
                <h3 class="tag-title">:nth-child(n+2)</h3>
                <div class="tag-ball">
                    <div class="ball ball_6">1</div>
                    <div class="ball ball_6">2</div>
                    <div class="ball ball_6">3</div>
                    <div class="ball ball_6">4</div>
                    <div class="ball ball_6">5</div>
                    <div class="ball ball_6">6</div>
                </div>
            </div>
            <div class="tag-box">
                <h3 class="tag-title">:nth-child(2n)</h3>
                <div class="tag-ball">
                    <div class="ball ball_7">1</div>
                    <div class="ball ball_7">2</div>
                    <div class="ball ball_7">3</div>
                    <div class="ball ball_7">4</div>
                    <div class="ball ball_7">5</div>
                    <div class="ball ball_7">6</div>
                </div>
            </div>
            <div class="tag-box">
                <h3 class="tag-title">:nth-child(2n+2)</h3>
                <div class="tag-ball">
                    <div class="ball ball_8">1</div>
                    <div class="ball ball_8">2</div>
                    <div class="ball ball_8">3</div>
                    <div class="ball ball_8">4</div>
                    <div class="ball ball_8">5</div>
                    <div class="ball ball_8">6</div>
                </div>
            </div>
            <div class="tag-box">
                <h3 class="tag-title">:nth-child(2n-2)</h3>
                <div class="tag-ball">
                    <div class="ball ball_9">1</div>
                    <div class="ball ball_9">2</div>
                    <div class="ball ball_9">3</div>
                    <div class="ball ball_9">4</div>
                    <div class="ball ball_9">5</div>
                    <div class="ball ball_9">6</div>
                </div>
            </div>
        </el-card>
    </div>
</template>
<script setup >

</script>
<style scoped lang="scss">
.tag-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tag-ball {
    display: flex;
}

.ball {
    width: 40px;
    height: 40px;
    margin: 5px;
    border-radius: 50%;
    background-color: red;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ball_1:first-child {
    background-color: aqua;
}

.ball_2:last-child {
    background-color: aqua;
}

.ball_3:nth-child(2) {
    background-color: aqua;
}

.ball_4:nth-child(odd) {
    background-color: aqua;
}

.ball_5:nth-child(even) {
    background-color: aqua;
}

.ball_6:nth-child(n+2) {
    background-color: aqua;
}

.ball_7:nth-child(2n) {
    background-color: aqua;
}

.ball_8:nth-child(2n+2) {
    background-color: aqua;
}

.ball_9:nth-child(2n-2) {
    background-color: aqua;
}</style>